<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/css.css" />
		<script type="text/javascript">
			window.onload = function(){
			//创建一个"广州"节点,添加到#city下
			myClick("btn01",function(){
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);
				var city = document.getElementById("city");
				city.appendChild(li);
			});
			//将"广州"节点插入到#bj前面
			myClick("btn02",function(){
				//创建广州节点
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				city.insertBefore(li , bj);
				 
			});
			
			//使用"广州"节点替换#bj节点
			myClick("btn03",function(){
				//创建广州节点
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				city.replaceChild(li , bj);
				 
			});
			
			//删除#bj节点
			myClick("btn04",function(){
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				city.removeChild(bj);
			});
			
			//读取#city内的HTML代码
			myClick("btn05",function(){
				var city = document.getElementById("city");
				alert(city.innerHTML);
			});
			
			//设置#bj内的HTML代码
			myClick("btn06",function(){
				var bj = document.getElementById("bj");
				bj.innerHTML = "北京京";
			});
			
			
			};
			
			 function myClick(idStr,fun) {
			 	//获取btn按钮
			 	var btn = document.getElementById(idStr);
			 	btn.onclick = fun;
			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>
